<%@ page language="java"  pageEncoding="UTF-8" contentType="text/html;charset=utf-8"%>
<%  
    String path = request.getContextPath();  
    String basePath = request.getScheme() + "://"  
            + request.getServerName() + ":" + request.getServerPort()  
            + path + "/";  
%>  
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
	<head>
	<base href="<%=basePath%>"> 
	<script src="js/jquery-2.1.0.min.js" type="text/javascript"></script>
	<script src="js/ajaxfileupload.js" type="text/javascript"></script>
	
	

    <script type="text/javascript">
    function ajaxFileUpload()  
    {  
      
    $("#loading")  
        .ajaxStart(function(){  
            $(this).show();  
        })//开始上传文件时显示一个图片  
        .ajaxComplete(function(){  
            $(this).hide();  
        });//文件上传完成将图片隐藏起来  
          
       $.ajaxFileUpload({  
                 url:'<%=basePath %>common/ctrl/file/upload',             //需要链接到服务器地址  
                 secureuri:false,  
                 fileElementId:'uploadFileInput',                         //文件选择框的id属性  
                 dataType: 'json',                                     //服务器返回的格式，可以是json  
                 success: function (data, status)             //相当于java中try语句块的用法  
                 {     
                 alert(data);       //data是从服务器返回来的值     
                     $('#result').html('上传图片成功!请复制图片地址<br/>'+data.url);  
                     $('#loading').attr('src','<%=basePath %>'+data.url);
                     $('#loading').show();
   
                 },  
                 error: function (data, status, e)             //相当于java中catch语句块的用法  
                 {  
                     $('#result').html('上传图片失败');  
                 }  
               }  
             );  
    }  
    </script>		
</head>
<body>
	hello!!
	<div id="result" style="FONT:12px 宋体"></div><br/>  
	<img id="loading" src="loading.gif" style="display:none;" width="300" height="300">  
	<form name="form_uploadImg" action="" method="POST" enctype="multipart/form-data">  
		<input id="uploadFileInput" type="file" size="45" name="uploadFileInput" class="input" />  
		<input type="button" id="buttonUpload" onclick="return ajaxFileUpload();" value="上传图片"/>  
	</form> 	
</body>
</html>